<template>

  <div>
    <el-button @click.native.prevent="addRow()" type="success" style="left: 50px">添加信息</el-button>
    <el-table :data="tableData" style="width: 60%">
      <el-table-column fixed prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="description" label="描述" width="120"></el-table-column>
      <el-table-column prop="adminCount" label="后台用户数量" width="150"></el-table-column>
      <el-table-column prop="status" label="启用状态" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.status === 0 ? '未开启' : '开启'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">移除</el-button>
          <el-button @click.native.prevent="updateRow(scope.$index, tableData)" type="text" size="small">修改</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>
  export default {
    name: 'role',
    data () {
      return {
        tableData: [{
          id: '66*55555',
          createTime: '2016-05-03',
          name: '王小虎你是个老刘',
          description: '上海0055',
          status: 1,
          adminCount: 200333
        }]
      }
    },
    created () {
      this.queryRoleList()
    },
    methods: {

      queryRoleList () {
        this.$http.getRequest('user/role/role/index', {}).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data
          } else if (res.data.code == 403) {
            this.$message.info('没有相关权限！')
          }
        }).catch(err => {
          this.$message.info(err)
        })
      },

      /**
       * 删除数据
       * 根据下标获取元素
       * @param index
       */
      deleteRow (index, rows) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //根据下标获取ID,将真实的id传给后端
          var data = {id: this.tableData[index].id}
          this.$http.getRequest('user/role/role/delete', data).then(res => {
            if (res.data.code == 200) {
              //删除数组中下标的元素
              this.tableData.splice(index, 1)
              this.$message.success('恭喜！删除成功！')
            } else if (res.data.code == 403) {
              this.$message.info('没有相关权限！')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
      //添加
      addRow () {
        this.$router.push('/addRow')
      },
      //修改
      updateRow (index, rows) {
        var ss = rows.splice(index, 1)[0]
        //对象传递过去，直接展示
        this.$router.push({path: '/updateRole', query: {form: ss}})
      }

    }
  }
</script>

<style scoped>

</style>
